<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:45:"themes/admin_simpleboot3/admin/user/rank.html";i:1599026411;s:43:"themes/admin_simpleboot3/public/header.html";i:1584585426;}*/ ?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- HTML5 shim for IE8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <title><?php echo Config('web_name'); ?></title>

    <link href="__TMPL__/public/assets/themes/<?php echo cmf_get_admin_style(); ?>/bootstrap.min.css" rel="stylesheet">
    <link href="__TMPL__/public/assets/simpleboot3/css/simplebootadmin.css" rel="stylesheet">
    <link href="__STATIC__/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <style>
        form .input-order {
            margin-bottom: 0px;
            padding: 0 2px;
            width: 42px;
            font-size: 12px;
        }

        form .input-order:focus {
            outline: none;
        }

        .table-actions {
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 0px;
        }

        .table-list {
            margin-bottom: 0px;
        }

        .form-required {
            color: red;
        }
    </style>
    <script type="text/javascript">
        //全局变量
        var GV = {
            ROOT: "__ROOT__/",
            WEB_ROOT: "__WEB_ROOT__/",
            JS_ROOT: "static/js/",
            APP: '<?php echo \think\Request::instance()->module(); ?>'/*当前应用名*/
        };
    </script>
    <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
    <script src="__STATIC__/js/wind.js"></script>
    <script src="__TMPL__/public/assets/js/bootstrap.min.js"></script>
    <script src="__TMPL__/public/assets/js/echarts.js"></script>
    <script>
        Wind.css('artDialog');
        Wind.css('layer');
        $(function () {
            $("[data-toggle='tooltip']").tooltip();
            $("li.dropdown").hover(function () {
                $(this).addClass("open");
            }, function () {
                $(this).removeClass("open");
            });
        });
    </script>
    <?php if(APP_DEBUG): ?>
        <style>
            #think_page_trace_open {
                z-index: 9999;
            }
        </style>
    <?php endif; ?>
<link rel="stylesheet" href="__STATIC__/js/element/css/element.css">
<style>
    [v-cloak] {
        display: none !important;
    }
    .row_class{
        width: 100%;
        margin: 0;
        height: 48px;
        line-height: 48px;
    }
</style>
</head>
<body>

<div class="wrap js-check-wrap" id="app" v-cloak>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">优秀办公室评选</a></li>
    </ul>
    <div style="padding: 20px;">
        <el-tabs type="border-card">
            <el-tab-pane label="排行榜">
                <div v-if="type == 1">
                    <el-tag effect="dark" @click="changeType(1)">本月</el-tag>
                    <el-tag effect="light" @click="changeType(2)">年度</el-tag>
                </div>
                <div v-else>
                    <el-tag effect="light" @click="changeType(1)">本月</el-tag>
                    <el-tag effect="dark" @click="changeType(2)">年度</el-tag>
                </div>

                <el-collapse accordion v-model="activeName" @change="changePanel" v-loading="loading">
                    <el-collapse-item :disabled="true">
                        <template slot="title">
                            <el-row :gutter="20" class="row_class">
                                <el-col :span="2">排名</el-col>
                                <el-col :span="2">优秀处</el-col>
                                <el-col :span="1">总分</el-col>
                                <el-col :span="1"></el-col>
                                <el-col :span="18"></el-col>
                            </el-row>
                        </template>
                    </el-collapse-item>

                    <el-collapse-item v-for="item in tableData" :name="item.department_id">
                        <template slot="title">
                            <el-row :gutter="20" class="row_class">
                                <el-col :span="2">{{item.index}}</el-col>
                                <el-col :span="2">{{item.department_name}}</el-col>
                                <el-col :span="1">{{item.score}}</el-col>
                                <el-col :span="1"> <span @click.stop="exportTable(item.department_id)">导出</span></el-col>
                                <el-col :span="18">
                                    <el-progress :text-inside="true" :stroke-width="26" :percentage="item.percentage" :color="customColorMethod" style="line-height: 48px;"></el-progress>
                                </el-col>
                            </el-row>
                        </template>
                        <div>
                            <el-table
                                    :data="user_tableData"
                                    v-loading="table_loading"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="user_name"
                                        label="姓名"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="leader_grade"
                                        label="总分"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="content"
                                        label="得分概述">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-collapse-item>
                </el-collapse>



            </el-tab-pane>
        </el-tabs>
    </div>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="__STATIC__/js/element/js/element.js"></script>


<script type="text/javascript">

    let app = new Vue({
        el: '#app',
        data: {
            tableData: [],
            type:1,
            loading: true,
            table_loading: true,
            activeName: 0,
            user_tableData: []
        },
        created: function () {
            this.getList();
        },
        methods: {
            exportTable(department_id){
                window.location.href= GV.ROOT + "admin/user/exportDepartmentList?department_id="+department_id+"&type="+this.type
            },
            changePanel(){
                this.table_loading=true
                let department_id = this.activeName;
                let that = this;
                $.ajax({
                    url: GV.ROOT + "admin/user/getDepartmentList",
                    data: {
                        department_id:department_id,
                        type:that.type
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.user_tableData = res.data
                        }
                        that.table_loading=false
                    }
                });
            },
            changeType(type){
                this.loading=true
                this.type = type;
                this.getList();
            },
            getList(){
                //获取当前评分
                let that = this;
                $.ajax({
                    url: GV.ROOT + "admin/user/rankList",
                    data: {
                        type:this.type
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.tableData = res.data
                        }
                        that.loading=false
                    }
                });
            },
            customColorMethod(percentage) {
                if (percentage < 30) {
                    return 'rgb(82,193,245)';
                } else if (percentage < 50) {
                    return 'rgb(75,206,208)';
                }else if (percentage < 80) {
                    return 'rgb(255,169,76)';
                } else {
                    return 'rgb(251,98,96)';
                }
            },
        }
    })
</script>


</body>
</html>